<link rel="stylesheet" href="ccay/example/demo.css"	type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<!--[if lte IE 8]><script type="text/javascript" src="ccay/web/resource/ui/plugins/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="ccay/web/resource/ui/plugins/flot/jquery.flot.js" charset="utf-8" ></script>
<script type="text/javascript" src="ccay/web/resource/ui/plugins/flot/jquery.flot.pie.js" charset="utf-8" ></script>
<script type="text/javascript" src="ccay/web/resource/ui/ccay.ui.chart.js" charset="utf-8" ></script>
<script type="text/javascript" src="ccay/example/ui/point/pointDemo.js" />
<div id="pointDemo">
	<div title="API">
		<div>
		 <samp><h2>ops.lines属性说明：</h2></samp> 
			<div style='padding-left:30px'>
				<form id="param" class="init ccay-form">
					
					<div class="ccay-form-body ccay-form-custom">			
						<ul>
							<li class="ccay-form-row">
								<samp><h3>初始化属性</h3></samp> 
						    	<span class="ccay-form-input">
						    		<h3>描述</h3> 
						    	</span>
							</li>
							<li class="ccay-form-row">
								<samp>label: string</samp> 
						    	<span class="ccay-form-input">曲线名称</span>
							</li>
							<li class="ccay-form-row">
								<samp>xField: string</samp> 
						    	<span class="ccay-form-input">ajax方式返回的数据中x坐标的设置</span>
							</li>
							<li class="ccay-form-row">
								<samp>yField: string</samp> 
						    	<span class="ccay-form-input">ajax方式返回的数据中y坐标的设置</span>
							</li>
							<li class="ccay-form-row">
								<samp>fnSetData: function</samp> 
						    	<span class="ccay-form-input">ajax方式返回的数据中自定义数据方法，fnSetData(item)，item数据项         <br> 例子：fnSetData:function(item){
								 return [item.month,item.income -item.profit]
								 }</span>
							</li>
							<li class="ccay-form-row">
								<samp>ajax:null</samp> 
						    	<span class="ccay-form-input">ajax设置</span>
							</li>
						</div>
				</form>
			</div>
			<samp><h2>points点图设置</h2></samp> 
			<div style='padding-left:30px'>
				<form id="param" class="init ccay-form">
					<div class="ccay-form-body ccay-form-custom">	
						<li class="ccay-form-row">
							<samp><h3>初始化属性</h3></samp> 
					    	<span class="ccay-form-input">
					    		<h3>描述</h3> 
					    	</span>
						</li>
						<li class="ccay-form-row">
							<samp>show: boolean</samp> 
					    	<span class="ccay-form-input">是否显示</span>
						</li>
						<li class="ccay-form-row">
							<samp>radius: boolean</samp> 
					    	<span class="ccay-form-input">点的半径</span>
						</li>
					</ul>
				   </div>
			  </form>
			</div>
		</div>
		
	</div>
	
	<div title="点图">
		<h4><span>点图</span></h4>
		<div id=chart></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html1'>
&lt;h4>&lt;span>点图&lt;/span>&lt;/h4>
&lt;div id=chart11>&lt;/div>
</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js1'>
$('#chart11').chart({
	type:"point",
	lines:[{label: '月度利润',xField:'month',yField:'profit'},
	       {label: '月度支出',fnSetData:function(item){
	    	   return [item.month,item.profit - item.total]
	       } }
	],
	ajax:{
		url:'ccay/example/ui/chart/datas2.json'
	},
	fnClick:function(dataPoint){
		alert(dataPoint);
	}
});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#pointDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
		</div>
	</div>
	
	<div title="点线图">
		<h4><span>点线图 </span></h4>
		<div id=chart2></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html2'>
&lt;h4>&lt;span>Chart 数据过滤模式&lt;/span>&lt;/h4>
&lt;div id=chart22>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js2'>
$('#chart22').chart({
  	type:"line-point",
	lines:[{label: '月度利润',xField:'month',yField:'profit'},
	       {label: '月度销售额',xField:'month',yField:'total'}
	],
	linesOp:{
		radius:2
	},
	ajax:{
		url:'ccay/example/ui/chart/datas2.json'
	}
});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#pointDemo',$('#js2').html(),$('#html2').html())">亲自试一试</a>
		</div>
		
	</div>
	
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:100px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
  	
	<div title="FAQ">
	  	<form class="init ccay-form">
	    <div class="ccay-form-body">
	    	<ul></ul>
		</div>     
		<div class="ccay-form-custom">
	    <ul>                     
	        <li class="ccay-form-row">
	           <samp><h3>问题</h3></samp>
	           <span class="ccay-form-input">
	               <h3>解决方案</h3>
	           </span>
	        </li>
	        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
	        <li class="ccay-form-row">
	            <samp class="i18n" i18nKey=""></samp>                          
	            <span class="ccay-form-input"></span>
	        </li>  
	    </ul>
		</div>
	  	</form> 
	</div>
</div>
